<!-- 职位详情 -->
<template>
  <div class="box" v-loading="loading">
      <div class="search">
         <div class="search-content">
              <div class="search-left">
                  <el-input
                  placeholder="请输入搜索内容"
                  v-model="keyWord"
                  autocomplete
                  maxlength="20"
                  show-word-limit
                  />
              </div>
              <div class="search-right">
                  <button @click="searchKeyWord()">查询</button>
              </div>
         </div>
      </div>
      <div class="top">
          <div class="top-content">
              <div>
                  <button  @click="dialogFormVisible = true">增加企业+</button>
                  <button @click="delIsChecked()">批量删除-</button>    
              </div>
            
          </div>
      </div>
      <div class="content" ref="wrap">
        <el-table
          ref="multipleTable"
          :data="posts"
          border
          fit="false"
          stripe
          show-header
          highlight-current-row
          lazy
          load
          height="100%"
          :row-style="{height: '50px'}"
          @selection-change="handleSelectionChange">
        >
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="头像"  align="center" width="60" fixed>
              <template #default="scope">
                  <div style="display: flex; align-items: center">
                      <el-image :preview-src-list="scope.row.companyUrl" :src="scope.row.companyUrl" preview-teleported style="height:30px"/>
                  </div> 
              </template>
          </el-table-column>
          <el-table-column property="companyName" label="企业名称" show-overflow-tooltip width="120" fixed/>
          <el-table-column property="postName" label="职位" show-overflow-tooltip width="210"/>
          <el-table-column property="postProfile" label="职位介绍" show-overflow-tooltip width="800"  />
          <el-table-column property="postAddress" label="面试地址" show-overflow-tooltip   width="500"/>
          <el-table-column property="minSalary" align="center" label="底薪" show-overflow-tooltip width="60" />
          <el-table-column property="maxSalary" align="center" label="顶薪" show-overflow-tooltip width="60" />
          <el-table-column label="薪期"  align="center" width="60" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.salaryPeriod != null ? scope.row.salaryPeriod: "12" }}
              </template>
          </el-table-column>
          <el-table-column align="center" width="240" fixed="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
              <el-button size="small" @click="dialogUpdate(scope.$index,scope.row)">修改</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="delCompanyPost(scope.row.postId,scope.$index)">删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
          <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              @current-change="changePage"
              @prev-click="changePage"
              @next-click="changePage"
              :total="pageTotals"
          >
          </el-pagination>
      </div>
        <el-dialog title="添加职位内容" v-model="dialogFormVisible" lock-scroll :close-on-click-modal="false"  show-close="true" destroy-on-close="false">
          <el-form ref="forms" :model="forms">
              <el-form-item label="职位名称" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="companyPost.postName" autocomplete="off" class="el-input"></el-input>
              </el-form-item>
              <el-form-item label="面试地址" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="companyPost.postAddress" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
              <el-form-item label="职位描述" :label-width="formLabelWidth">
                      <el-input
                      type="textarea"
                      resize="none"
                      placeholder="请输入内容"
                      class="el-input"
                      maxlength="100"
                      show-word-limit
                      v-model="companyPost.postProfile">
                      </el-input>
              </el-form-item>
              <el-form-item label="最低薪资" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="companyPost.minSalary" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
               <el-form-item label="企业薪期" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="companyPost.salaryPeriod" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
              <el-form-item label="最高薪资" v-model="maxSalary" :label-width="formLabelWidth">
                   <el-input v-model="companyPost.maxSalary" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
               <el-form-item :label="'企业名称'" :label-width="formLabelWidth" class="el-input">                 
                  <el-select v-model="value" clearable placeholder="请选择是否正确" class="el-select">
                      <el-option
                      v-for="item in allCompanyNameList"
                      :key = "item.companyId"
                      :label = "item.companyName"
                      :value = "item.companyId"
                      >
                      </el-option>
                  </el-select>    
              </el-form-item>       
          </el-form>
          <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addCompanyPosts()" >确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="修改企业职位内容" v-model="dialogUpdatemVisible"  :close-on-click-modal="false" lock-scroll show-close="false">
         <el-form ref="forms" :model="forms">
              <el-form-item label="职位名称" :label-width="formLabelWidth" width="200px">
                  <el-input v-model="companyPostChange.postName" autocomplete="off" class="el-input"></el-input>
              </el-form-item>
              <el-form-item label="面试地址" :label-width="formLabelWidth" width="200px">
                  <el-input v-model="companyPostChange.postAddress" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
              <el-form-item label="职位描述" :label-width="formLabelWidth">
                      <el-input
                      type="textarea"
                      resize="none"
                      placeholder="请输入内容"
                      class="el-input"
                      maxlength="1000"
                      :autosize="{ minRows: 2, maxRows: 6}"
                      show-word-limit
                      v-model="companyPostChange.postProfile">
                      </el-input>
              </el-form-item>
              <el-form-item label="最低薪资" :label-width="formLabelWidth" width="200px">
                  <el-input v-model="companyPostChange.minSalary" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
               <el-form-item label="企业薪期" :label-width="formLabelWidth" width="200px">
                  <el-input v-model="companyPostChange.salaryPeriod" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
              <el-form-item label="最高薪资" v-model="maxSalary" :label-width="formLabelWidth">
                   <el-input v-model="companyPostChange.maxSalary" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>

               <el-form-item :label="企业名称" :label-width="formLabelWidth" class="el-input" v-for="(item,index) in num" :key="index">
                  <el-input v-model="topicList.choosecontents[index].chooseContent" autocomplete="off"></el-input>                 
                  <el-select v-model="companyPost" clearable placeholder="请选择是否正确" class="el-select">
                      <el-option
                      label="错误"
                      value="0"
                      >
                      </el-option>
                      <el-option
                      label="正确"
                      value="1"
                      >
                      </el-option>
                  </el-select>    
              </el-form-item>       
          </el-form>
          <div class="dialog-footer">
              <el-button @click="dialogUpdatemVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogUpdated()">确 定</el-button>
          </div>
      </el-dialog>
  </div>
<!-- Form -->
    
</template>

<script>

import {getAllPost,getAllPage,getCompanyById,addCompanyPost,selectCompanys,delCompanyPost} from '../../api/secondary_api/zhiwei'
import {ElMessage } from 'element-plus'

export default{
  name:'PageStoreManage',
   data() {
      return{
          dialogUpdatemVisible: false,//修改弹框的显示
          dialogFormVisible: false,//修改增加弹框的显示
          pageNum:1,//页码
          value:"",
          pageSize:0,//页面总条数
          pageTotals:0,//总页数
          keyWord:"",//模糊查询的条件\
          companyKeyWord:"",//模糊查询的条件
          posts:[],//查询的企业
          loading:true,//加载
          companyPostChange:null,
          allCompanyNameList:[],//企业名称
          multipleSelection: [],//被选中的行
          companyPost:{//添加企业职位的模板
                "postId": "",
                "postName": "",
                "postAddress": "",
                "postProfile": "",
                "minSalary": "",
                "maxSalary": "",
                "salaryPeriod": 0,
                "companyId":1,
                "tip":0
            },
        companyPost1://添加企业职位的模板
                `{
                "postId": "",
                "postName": "",
                "postAddress": "",
                "postProfile": "",
                "minSalary": "",
                "maxSalary": "",
                "salaryPeriod": 0,
                "companyId":1,
                "tip":0}`,
      }
  },
  methods: {
      openSuccess() {//成功信息弹窗
          this.$message({
              message: '添加数据成功！！！',
              type: 'success'
          });
       },
      openError(response) {//错误信息弹窗
         this.$message.error(response.msg);
       },
      addCompanyPosts(){//增加题目  
          addCompanyPost(this.companyPost).then(
              response=>{
                  if (response.code == 200) {
                      this.openSuccess();
                  }else {
                      this.openError(response);
                  }
              }
          );
          this.emptyForm();
      },
      delCompanyPost(postId,index){
          console.log(postId)
        delCompanyPost(postId).then(
            response=>{
                if (response.code == 200) {
                      this.openSuccess("删除数据成功！");
                  }else {
                      this.openError(response);
                  }
            }
        )
          this.posts.splice(index,1);
      },
      dialogUpdate(i){//修改获取数据
          this.dialogUpdatemVisible=true;
          this.companyPostChange = this.posts[i];
          console.log(this.companyPostChange);
      },
       dialogUpdated(){//修改后发送数据
          this.dialogUpdatemVisible = false;     
           this.companyPost = this.companyPostChange;
         addCompanyPost(this.companyPost).then(
              response=>{
                  if (response.code == 200) {
                      this.openSuccess('修改数据成功！');
                  }else {
                      this.openError(response);
                  }
              }
          );
      },
        emptyForm(){//清空添加内容
            this.dialogFormVisible = false;  
            this.companyPost = JSON.parse(this.companyPost1);
            this.$refs.forms.resetFields();
        },
      
        handleSelectionChange(val) {//全选
            console.log(val)
            this.multipleSelection = val;
        },
        changePage(e){//搜索分页切换
            this.loading = true;
            this.pageNum = e;
            getAllPost(this.pageNum,this.pageSize,this.keyWord).then(
              response=>{
                  if(response.code == 200){ 
                       const posts = response.data                        
                      if(posts != null ){
                        posts.forEach((item)=>{
                          getCompanyById(item.companyId).then(
                            response=>{  
                                    item["companyUrl"] = response.data.companyUrl;
                                    item["companyName"] = response.data.companyName
                                    this.loading = false;                                
                            }
                          )
                        });
                      }
                       setTimeout(()=>{         
                          this.posts = posts;
                      },1000)
                  }else{
                      ElMessage.error(response.msg);
                  }
              }
            );   
          },
          searchKeyWord(){//模糊查询
              this.searchAll(this.pageNum,this.pageSize,this.keyWord)
          } ,
          searchAll(pageNum,pageSize,keyWord){//查询企业
              this.loading = true;
              getAllPage(keyWord).then(
                  response=>{
                      if(response.code == 200){
                          this.pageTotals = response.data.length
                          getAllPost(pageNum,pageSize,keyWord).then(
                              response=>{
                                  if(response.code == 200){
                                      const posts = response.data
                                      if(posts != null ){
                                        posts.forEach((item)=>{
                                          getCompanyById(item.companyId).then(
                                            response=>{
                                              item["companyUrl"] = response.data.companyUrl;
                                              item["companyName"] = response.data.companyName
                                              this.loading = false;
                                            }
                                          )
                                        })
                                      }
                                      setTimeout(()=>{
                                          this.posts = posts
                                      },1000);
                                      
                                      ElMessage({
                                          message: '查询到'+this.pageTotals+'条数据',
                                          type: 'success',
                                      })
                                  }else{
                                      ElMessage.error(response.msg);
                                  }
                              }
                          )
                      }else{
                          this.posts = [];
                          this.pageTotals = 0;
                          ElMessage.error(response.msg);
                      }
                  }
              )

          }
      } ,  
      mounted(){
          this.$nextTick(()=>{//计算每页显示多少条
              let $ele = this.$refs.wrap
              let height = $ele.offsetHeight
              this.pageSize = parseInt(height/50);
              this.searchAll(this.pageNum,parseInt(height/50),this.keyWord)
          });
          selectCompanys(this.companyKeyWord).then(
              response=>{
                  if (response.code == 200) {
                      this.allCompanyNameList = response.data;
                      this.openSuccess('查询数据成功！');
                      console.log(response,"查询数据成功！")
                  }else {
                      this.openError(response);
                  }
              }
          );
      },  
  }
</script>

<style scoped>
  .box{
      width: 100%;
      /* height: calc(100vh - 151px); */
      font-style: 40px;
      overflow: hidden;
  }
  .top{
      width: 100%;
      padding: 0 2%;
      overflow: hidden;
  }
  .top-content{
      width: 96%;
      height: 35px;
      margin-top: 10px;
      overflow: hidden;
  }
   .top-content>div>button{
       width: 130px;
       height: 35px;
       line-height: 35px;
       color: #000;
       border-radius: 5px;
      border: 1px solid #fff;
   }
   button:hover{
       opacity: 0.5;
   }
    .top-content>div>button:nth-of-type(1){
        background-color: #00ffff;
   }
   .top-content>div>button:nth-of-type(2){
         background-color: red;
   }
   .search{
       width: 100%;
       padding: 0 2%;
       overflow: hidden;
   }
   .search-content{
       width: 96%;
       overflow: hidden;
       margin-top: 10px;
   }
   .search-left{
       width: 25%;
       float: left;
   }
  .search-right{
       width: 10%;
       float: left;
   }
   .search-left>.el-input{
       width: 100%;
   }
   .search-right>button{
       width: 100%;
       height: 32px;
       overflow: hidden;
       background-color: #00ffff;
       float: right;
      border: 1px solid #fff;
      border-radius: 5px;
   }
  .content{
      height: calc(100vh - 265px);
      margin-top: 5px;
      padding: 0 2%;
      position: relative;
      display: flex;
  }

  .delBtn{
      background-color: rgba(245, 6, 6, 0.973);
      color: #fff;
  }
   .editBtn{
      background-color: #0079f3;
      color: #fff;
  }
  .delBtn,.editBtn{
      width: 65px;
      height: 30px;
      line-height: 30px;
      border: 0px;
      border-radius: 5px;
      margin-left: 10px;
      border: 1px solid #fff;
  }
  .dialog-footer{
      margin-left:42%;
  }
  .addButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 0;
  }
  .delButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 30px;
  }
  .el-input{
      width: 90%; 
  }
  .el-input__count{
      height: 10%;
  }
  .bottom{
      margin: 20px 2%;
  }
  
</style>